import { createPayment, updatePayment } from '@/services/payment/payment_api';
import { ModalForm, ProForm, ProFormDigit, ProFormMoney, ProFormRadio, ProFormSelect, ProFormText, ProFormUploadButton } from '@ant-design/pro-components';
import { message, UploadFile } from 'antd';
import React, { useEffect, useState } from 'react';
import { FormattedMessage, useIntl, useModel } from 'umi';
import CustomerSelect from './CustomerSelect';
import { UploadRequestOption } from 'rc-upload/lib/interface';
import axios from 'axios';
import SystemDictSelect from './SystemDictSelect';
import UploadButton from '@/components/UploadButton';


interface CreateModalProps {
    visible: boolean;
    onCancel: () => void;
    onSuccess: () => void;
    values?: Partial<ApiService>;
}

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
};
const AddForm: React.FC<CreateModalProps> = ({ visible, values, onCancel, onSuccess }) => {
    const [form] = ProForm.useForm<ApiService>();
    const intl = useIntl();
    const { initialState } = useModel('@@initialState');
    const { currentUser } = initialState || {};
    useEffect(() => {
        if (visible) {
            form.resetFields();
            form.setFieldsValue({
                asStatus: '1',
                serviceType: '1',
                labelPre: '1',
                ...(values || {})
            });
        }
    }, [visible, values]);

    const handleSubmit = async (formValues: ApiService) => {
        try {
            const response = values?.id
                ? await updatePayment({ ...formValues, id: values.id })
                : await createPayment(formValues);
            if (response.code != 0) {
                message.error(intl.formatMessage({ id: 'request.error.operating' }) + response?.msg);
                return false;
            }

            message.success(intl.formatMessage({ id: 'request.success.operating' }));
            onSuccess();
            form.resetFields();
            return true;
        } catch (error) {
            message.error(intl.formatMessage({ id: 'request.error.retry' }));
            return false;
        }
    };
    const isAdmin = currentUser?.isAdmin;
    return (
        <ModalForm<ApiService>
            title={values?.id
                ? intl.formatMessage({ id: 'pages.edit' })
                : intl.formatMessage({ id: 'pages.create' })}
            width={800}
            form={form}
            open={visible}
            onOpenChange={(visible) => !visible && onCancel()}
            onFinish={handleSubmit}
            autoFocusFirstInput
            modalProps={{
                destroyOnClose: true,
                maskClosable: false,
            }}
            submitter={{
                searchConfig: {
                    submitText: intl.formatMessage({ id: 'pages.button.submit' }),
                    resetText: intl.formatMessage({ id: 'pages.button.cancel' }),
                },
            }}
            layout="horizontal" {...formItemLayout}
        >
            {isAdmin &&
                <CustomerSelect
                    label={intl.formatMessage({ id: 'pages.customer.select.label' })}
                    placeholder={intl.formatMessage({ id: 'pages.customer.select.placeholder' })}
                    rules={[{ required: true, message: intl.formatMessage({ id: 'pages.customer.select.required' }) }]}
                    disabled={!!values?.id}
                />}
            <ProFormText
                name="payBank"
                label={intl.formatMessage({ id: 'pages.payment.form.payBank.label' })}
                placeholder={intl.formatMessage({ id: 'pages.payment.form.payBank.placeholder' })}
                rules={[{
                    required: true,
                    message: intl.formatMessage({ id: 'pages.payment.form.payBank.required' })
                }]}
            />
            <SystemDictSelect
                name="pmCode"
                label={intl.formatMessage({ id: 'pages.payment.form.pmCode.label' })}
                dict_key="brokerage_withdraw_type"
            />
            <ProFormRadio.Group
                name="currencyCode"
                label={intl.formatMessage({ id: "pages.addForm.customer.customerCurrency" })}
                initialValue="USD"
                options={["USD", "CNY"]}
            />
            <ProFormText
                name="payerAccountName"
                label={intl.formatMessage({ id: 'pages.payment.form.payerAccountName.label' })}
                placeholder={intl.formatMessage({ id: 'pages.payment.form.payerAccountName.placeholder' })}
                rules={[{
                    required: true,
                    message: intl.formatMessage({ id: 'pages.payment.form.payerAccountName.required' })
                }]}
            />
            <ProFormText
                name="payerAccount"
                label={intl.formatMessage({ id: 'pages.payment.form.payerAccount.label' })}
                placeholder={intl.formatMessage({ id: 'pages.payment.form.payerAccount.placeholder' })}
                rules={[{
                    required: true,
                    message: intl.formatMessage({ id: 'pages.payment.form.payerAccount.required' })
                }]}
            />
            <ProFormMoney
                label={intl.formatMessage({ id: 'pages.payment.form.amount.label' })}
                name="amount"
                fieldProps={{ moneySymbol: false }}
                placeholder={intl.formatMessage({ id: 'pages.payment.form.amount.placeholder' })}
                min={0}
                width="lg"
                rules={[{
                    required: true,
                    message: intl.formatMessage({ id: 'pages.payment.form.amount.required' })
                }]}
            />
            <ProFormMoney
                label={intl.formatMessage({ id: 'pages.payment.form.realAmount.label' })}
                name="realAmount"
                fieldProps={{ moneySymbol: false }}
                placeholder={intl.formatMessage({ id: 'pages.payment.form.realAmount.placeholder' })}
                min={0}
                width="lg"
                rules={[{
                    required: true,
                    message: intl.formatMessage({ id: 'pages.payment.form.realAmount.required' })
                }]}
            />
            <ProFormText
                name="amountUpper"
                label={intl.formatMessage({ id: 'pages.payment.form.amountUpper.label' })}
                placeholder={intl.formatMessage({ id: 'pages.payment.form.amountUpper.placeholder' })}
            />
            <ProFormText
                name="note"
                label={intl.formatMessage({ id: 'pages.common.note.label' })}
                placeholder={intl.formatMessage({ id: 'pages.common.input.placeholder' })}
            />
            <UploadButton
                name="attachment"
                label={intl.formatMessage({ id: 'pages.payment.form.attachment.label' })}
                form={form}
                initialValue={values?.attachment}
                action="/admin-api/infra/file/upload"
                bizType="payment_attachments"
            />
        </ModalForm>
    );
};

export default AddForm;